<template>
	<view class="">
		<view class="extract-box">
			<view class="extracr-top">
				<view class="fc-33">提现金额</view>
				<input type="text" placeholder="请输入提现金额" @keyup ="keyU" v-model="amount" class="mar-top-30 fs-36 fc-66"/>
			</view>
			<view class="flex jcsb ext-bot" style="border-top:1px solid #F6F6F6">
				<view class="view" style="border-right: 1px solid #dfdfdf;">
					手续费<text class="fc-df5">0</text>
				</view>
				<view class="view">
					实际到账<text class="fc-df5">{{amount}}</text>
				</view>
			</view>
		</view>
		<view class="fs-24 fc-99 mar-top-20 mar-left-20">最多一次可提现150元</view>
		<view class="flex mar-top-30">
			<radio-group @change="radioGroup">
				<radio color="#84C0F4" :value="1" :checked="true" style="transform:scale(0.72);"></radio>
			</radio-group>
			<view class="agreement2">
				已同意并同意《***协议》
			</view>
		</view>
		<view class="btn-row row">
			<button type="primary" class="btn-save width-90" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
export default {
		data() {
			return {
				radioValue: 1,//协议选择	
				amount: 0,
				
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		onLoad(option) {			
			if(!this.userInfo || !this.userInfo.id) {
				this.$store.dispatch("reLogin")
				return;
			}
		},
		mounted() {			
			
		},		
		methods: {
			keyU() {
				this.amount = this.amount.replace(/[^\d.]/g, "");  //仅保留数字和"."
				this.amount = this.amount.replace(/\.{2,}/g, "."); //两个连续的"."仅保留第一个"."
				this.amount = this.amount.replace(".", "$#*").replace(/\./g,'').replace('$#*','.');//去除其他"."
				this.amount = this.amount.replace(/^(\d+)\.(\d\d).*$/, '$1.$2');;//限制只能输入两个小数
				if (this.amount.indexOf(".") < 0 && this.amount != "") { //首位是0的话去掉
					this.amount = parseFloat(this.amount);
				}
			},
			//协议同意
			radioGroup(e) {
				this.radioValue = e.detail.value;
			},
			// 提现
			submit() {
				if(!this.amount || this.amount <= 0) {
					uni.showToast({
						icon:"none",
						title:"请输入有效的提现金额"
					})
					return;
				}
				if(this.amount > 150) {
					uni.showToast({
						icon:"none",
						title:"请输入150元内的提现金额"
					})
					return;
				}
				var param = {
					userId: this.userInfo.id,
					openId: this.userInfo.openid,
					amount: this.amount
				}
				uni.showLoading()
				this.$apis.sendTransfer(param)
				.then(res=> {
					uni.navigateBack({
						delta:1
					})	
					uni.hideLoading()
				})
				.catch(e=>{
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #F6F6F6;
		.extract-box{
			margin-top: 15rpx;
			background: #fff;			
			border-radius: 8rpx;
			.extracr-top{
				height: 170rpx;	
				padding: 30rpx 30rpx 0;
			}
		}
		.ext-bot{
			text-align: center;
			.view{
				width: 49%;
				line-height: 85rpx;
			}
		}
		.btn-row {
			width: 100%;
			box-sizing: border-box;
			.btn-save {
				background-color: #84C0F4;
				height: 90upx;
				line-height: 90upx;
				font-size:34rpx;
				border-radius: 8rpx;
			}
			.width-90 {
				width: 90%;
				margin:34rpx auto;
			}
		}
	}
	
</style>
